import React, { FC } from 'react'
import { Typography } from 'antd'
import { QuestionInfoPropsType, QuestionInfoDefaultProps } from './interface'

const { Title, Paragraph } = Typography

const QuestionInfo: FC<QuestionInfoPropsType> = (props: QuestionInfoPropsType) => {
    const { title, desc = '' } = { ...QuestionInfoDefaultProps, ...props }
    const descList = desc.split('\n')
    return (
        <div style={{ textAlign: 'center' }}>
            <Title level={3}>{title}</Title>
            <div>
                <Paragraph>
                    {descList.map((d, index) => {
                        return (
                            <span key={index}>
                                {index > 0 && <br />}
                                {d}
                            </span>
                        )
                    })}
                </Paragraph>
            </div>
        </div>
    )
}
export default QuestionInfo
